<template>
  <div>
    <a-modal
      title="排课"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      width="720px"
      :bodyStyle="{ 'max-height': '500px', 'overflow-y': 'auto' }"
      @ok="form.type == 1 ? submit('form') : submitDate('formDate')"
    >
      <div>
        <a-radio-group :defaultValue="1" v-model="form.type">
          <a-radio-button :value="1">规则排课</a-radio-button>
          <a-radio-button :value="2">日历排课</a-radio-button>
        </a-radio-group>
      </div>
      <div v-if="form.type == 1" style="margin-top: 15px">
        <a-form-model :model="form" ref="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-form-model-item label="开始日期" prop="start_time">
            <a-date-picker v-model="form.start_time" @change="getTeacherFilter('form')" />
          </a-form-model-item>
          <a-form-model-item label="结束方式">
            <a-select
              v-model="form.end_type"
              placeholder="请选择结束方式"
              style="width: 200px"
              @change="form.repeat_type = 1"
            >
              <a-select-option :value="0">不结束</a-select-option>
              <a-select-option :value="1">限日期</a-select-option>
              <a-select-option :value="2">限次数</a-select-option>
            </a-select>
            <span v-if="form.end_type == 1" style="margin-left: 10px">
              <a-date-picker
                placeholder="请选择结束日期"
                :disabled="!form.start_time"
                :disabled-date="disabledDate"
                v-model="form.end_time"
              />
            </span>
            <span v-if="form.end_type == 2" style="margin-left: 10px">
              <a-input-number id="inputNumber" :min="1" v-model="form.num" style="margin-right: 10px" />次之后
            </span>
          </a-form-model-item>
          <a-form-model-item label="是否重复">
            <a-select :defaultValue="1" v-model="form.repeat_type" style="width: 200px">
              <a-select-option :value="1">每周</a-select-option>
              <a-select-option :value="2">隔周</a-select-option>
              <a-select-option :value="3" v-if="form.end_type == 2">每天</a-select-option>
              <a-select-option :value="4" v-if="form.end_type == 2">隔天</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="周几上课" prop="week_num" v-if="form.end_type !== 2">
            <a-checkbox-group v-model="form.week_num" style="width: 80%; position: relative; top: 5px">
              <a-row style="width: 100%">
                <a-col :span="3">
                  <a-checkbox :value="1">一</a-checkbox>
                </a-col>
                <a-col :span="3">
                  <a-checkbox :value="2">二</a-checkbox>
                </a-col>
                <a-col :span="3">
                  <a-checkbox :value="3">三</a-checkbox>
                </a-col>
                <a-col :span="3">
                  <a-checkbox :value="4">四</a-checkbox>
                </a-col>
                <a-col :span="3">
                  <a-checkbox :value="5">五</a-checkbox>
                </a-col>
                <a-col :span="3">
                  <a-checkbox :value="6">六</a-checkbox>
                </a-col>
                <a-col :span="3">
                  <a-checkbox :value="0">日</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="上课班级" prop="class_id">
            <a-select
              show-search
              allowClear
              v-model="form.class_id"
              placeholder="请选择上课班级"
              style="width: 258px"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              @search="searchClass"
              :defaultActiveFirstOption="false"
            >
             <a-select-option
                v-for="(item, index) in classList"
                :key="index"
                :value="item.id"
                @click="getClassFilter(item)"
                >{{ item.name }}</a-select-option
              >
            </a-select>
            <!-- <a-select placeholder="请选择上课班级" style="width: 200px" @change="classChange" v-model="form.class_id">
             
            </a-select> -->
          </a-form-model-item>
          <template v-if="structureID">
            <a-form-model-item label="上课时间" prop="class_time">
              <a-select
                placeholder="请选择上课时间"
                style="width: 200px"
                @change="getTeacherFilter('form')"
                v-model="form.class_time"
              >
                <a-select-option v-for="(item, index) in classTimeSelect" :key="index" :value="item.id"
                  >{{ item.start_time }}&nbsp;~&nbsp;{{ item.end_time }}</a-select-option
                >
              </a-select>
              <a-button @click="showChild('classTime')" style="margin-left: 20px">设置</a-button>
            </a-form-model-item>
            <a-form-model-item label="授课课程">{{ coure || '--' }}</a-form-model-item>

            <a-form-model-item label="上课老师">
              <a-select
                mode="multiple"
                :placeholder="
                  !form.start_time ? '请先选择上课日期' : !form.class_time ? '请先选择上课时间' : '请选择上课老师'
                "
                style="width: 200px"
                v-model="form.teacher_ids"
                :disabled="!form.class_time || !form.start_time"
                option-label-prop="label"
              >
                <a-select-option
                  v-for="(item, index) in teacherFilter"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                >
                  {{ item.name }}
                  <span style="color: red; float: right" v-if="item.time_status">冲突</span>
                  <span style="float: right" v-else>空闲</span>
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="上课教室">
              <a-select placeholder="请选择上课教室" style="width: 200px" allowClear v-model="form.classroom_id">
                <a-select-option :value="0">不指定</a-select-option>
                <a-select-option v-for="(item, index) in classroomSelect" :key="index" :value="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
              <a-button @click="showChild('classRoom')" style="margin-left: 20px">设置</a-button>
            </a-form-model-item>
          </template>
          <a-form-model-item label="上课内容">
            <a-input type="textarea" placeholder="最多20字" v-model="form.content" :maxLength="20"></a-input>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-else>
        <a-form-model
          :model="formDate"
          ref="formDate"
          :rules="rulesDate"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="上课日期">
            <div class>
              已选
              <span class="choiceDay">{{ formDate.date.length }}</span>
              天
            </div>
            <calendar-component
              ref="Calendar"
              :markDate="formDate.date"
              v-on:choseDay="choiceDay"
              v-if="showCalendar"
            ></calendar-component>
          </a-form-model-item>
          <a-form-model-item label="上课班级" prop="class_id">
            <!-- <a-select
              placeholder="请选择上课班级"
              style="width: 200px"
              v-model="formDate.class_id"
              notFoundContent="请选择上课班级"
            >
              <a-select-option
                v-for="(item, index) in classList"
                :key="index"
                :value="item.id"
                @click="getClassFilter(item)"
                >{{ item.name }}</a-select-option
              >
            </a-select> -->
            <a-select
              show-search
              allowClear
              v-model="formDate.class_id"
              placeholder="请选择上课班级"
              style="width: 258px"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              @search="searchClass"
              :defaultActiveFirstOption="false"
            >
             <a-select-option
                v-for="(item, index) in classList"
                :key="index"
                :value="item.id"
                @click="getClassFilter(item)"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
          <template v-if="structureID">
            <a-form-model-item label="上课时间" prop="class_time">
              <a-select
                placeholder="请选择上课时间"
                style="width: 200px"
                @change="getTeacherFilter('formDate')"
                v-model="formDate.class_time"
              >
                <a-select-option v-for="(item, index) in classTimeSelect" :key="index" :value="item.id"
                  >{{ item.start_time }}&nbsp;~&nbsp;{{ item.end_time }}</a-select-option
                >
              </a-select>
              <a-button @click="showChild('classTime')" style="margin-left: 20px">设置</a-button>
            </a-form-model-item>
            <a-form-model-item label="授课课程">{{ coure || '--' }}</a-form-model-item>
            <a-form-model-item label="上课老师">
              <a-select
                mode="multiple"
                :placeholder="
                  formDate.date.length == 0
                    ? '请先选择上课日期'
                    : !formDate.class_time
                    ? '请先选择上课时间'
                    : '请选择上课老师'
                "
                style="width: 200px"
                v-model="formDate.teacher_ids"
                :disabled="!formDate.class_time || formDate.date.length == 0"
                option-label-prop="label"
              >
                <a-select-option
                  v-for="(item, index) in teacherFilter"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                >
                  {{ item.name }}
                  <span style="color: red; float: right" v-if="item.time_status">冲突</span>
                  <span style="float: right" v-else>空闲</span>
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="上课教室">
              <a-select
                placeholder="请选择上课教室"
                style="width: 200px"
                allowClear
                v-model="formDate.classroom_id"
                v-if="classroomSelect.length != 0"
              >
                <a-select-option :value="0">不指定</a-select-option>
                <a-select-option v-for="(item, index) in classroomSelect" :key="index" :value="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
              <a-button @click="showChild('classRoom')" style="margin-left: 20px">设置</a-button>
            </a-form-model-item>
          </template>
          <a-form-model-item label="上课内容">
            <a-input type="textarea" placeholder="最多20字" v-model="formDate.content" :maxLength="20"></a-input>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
    <!--排课冲突  -->
    <a-modal
      title="排课冲突"
      :visible="modelVisible"
      @cancel="modelVisible = false"
      @ok="formSub(modelParams)"
      :confirmLoading="modelLoading"
      okText="忽略冲突"
      okType="danger"
      :zIndex="1100"
    >
      <div class="title">
        <div class="title-left">
          <a-icon type="warning" style="margin-right: 8px; color: #fdaba9" theme="filled" />冲突提示
        </div>
        <div class="title-right" @click="addConflictTest(form)" style="cursor: pointer">检测冲突</div>
      </div>

      <div class="datas" v-if="conflict.classroom != ''" style="margin-bottom: 20px">
        <div style="color: #f14133">
          <a-icon type="warning" style="margin-right: 8px" theme="filled" />
          教室冲突({{ conflict.classroom.length }})
        </div>
        <div
          v-for="(item, index) in conflict.classroom"
          :key="index"
          style="padding-left: 10px; margin-top: 10px; margin-bottom: 24px"
        >
          <div>
            <span v-if="item.class_room">{{ item.class_room.name }}</span>
          </div>
          <div v-if="item.classs">{{ item.classs.name }}</div>
          <div>
            {{ item.start_time | dayc | weeks }}
            <span style="color: #999">{{ item.class_start_time }} ~ {{ item.class_end_time }}</span>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 20px" class="datas" v-if="conflict.teacher != '' && conflict.teacher.length > 0">
        <div style="color: #f14133">
          <a-icon type="warning" style="margin-right: 8px" theme="filled" />
          老师冲突({{ conflict.teacher.length }})
        </div>
        <div
          v-for="(item, index) in conflict.teacher"
          :key="index"
          style="padding-left: 10px; margin-top: 10px; margin-bottom: 24px"
        >
          <div>
            <span v-for="(val, i) in item.teachers" :key="i">
              {{ val.name }}
              <span v-if="i < item.teachers.length - 1">，</span>
            </span>
          </div>
          <div v-if="item.classs">{{ item.classs.name }}</div>
          <div v-else>暂无班级</div>
          <div>
            {{ item.start_time | dayc | weeks }}
            <span style="color: #999">{{ item.class_start_time }} ~ {{ item.class_end_time }}</span>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 20px" class="datas" v-if="conflict.student != ''">
        <div style="color: #f14133">
          <a-icon type="warning" style="margin-right: 8px" theme="filled" />
          学员冲突({{ conflict.student.length }})
        </div>
        <div
          v-for="(item, index) in conflict.student"
          :key="index"
          style="padding-left: 10px; margin-top: 10px; margin-bottom: 24px"
        >
          <div v-if="item.classs && item.classs.student">
            <span v-for="(val, i) in item.classs.student" :key="i"
              >{{ val.name }} <span v-if="i < item.classs.student.length - 1">，</span>
            </span>
          </div>
          <div v-if="item.classs">{{ item.classs.name }}</div>
          <div>
            {{ item.start_time | dayc | weeks }}
            <span style="color: #999">{{ item.class_start_time }} ~ {{ item.class_end_time }}</span>
          </div>
        </div>
      </div>
    </a-modal>
    <class-time ref="classTime" @reload="getSelect"></class-time>
    <classroom-components ref="classRoom" @reload="getSelect"></classroom-components>
  </div>
</template>

<script>
import moment from 'moment'
import { classTimeList } from '@/api/classTime'
import { teacherList } from '@/api/teacher'
import { classroomList } from '@/api/classroom'
import { classList } from '@/api/class'
import classTime from '@/components/classTimeModel'
import classroomComponents from '@/components/classroomManage'
import {
  scheduleCreate,
  scheduleList,
  scheduleDel,
  scheduleEdit,
  scheduleInfo,
  planLessonTeacherFilter,
  planLessonRoomFilter,
} from '@/api/class'
import calendarComponent from '@/components/calendar'
export default {
  components: {
    calendarComponent,
    classTime,
    classroomComponents,
  },
  data() {
    return {
      coure: undefined, //课程名字
      classRoom: undefined, //班级教室id
      teacher: undefined, //教师id
      structureID: undefined,
      classList: [],
      modelVisible: false,
      visible: false,
      confirmLoading: false,
      form: {
        type: 1,
        end_type: 0, //结束方式
        start_time: moment(),
        num: null,
        end_time: moment(),
        repeat_type: 1,
        week_num: [1],
        class_time: undefined,
        classroom_id: this.classRoom || 0,
        class_id: undefined,
        teacher_ids: [],
        content: '',
        school_id: this.$store.state.user.school,
      },
      formDate: {
        type: 2,
        date: [],
        //不必传 | 上课日期
        class_time: undefined,
        // 必传 | 上课时间段表id
        classroom_id: this.classRoom || 0,
        // 不必传 | 教室id
        class_id: undefined,
        teacher_ids: [],
        // 不必传 | 班级id
        school_id: this.$store.state.user.school,
        content: '',
      },
      rules: {
        start_time: [{ required: true, message: '请选择开始日期' }],
        week_num: [{ required: true, message: '请选择周几上课' }],
        class_time: [{ required: true, message: '请选择上课时间' }],
        class_id: [{ required: true, message: '请选择上课班级' }],
      },
      rulesDate: {
        class_time: [{ required: true, message: '请选择上课时间' }],
        class_id: [{ required: true, message: '请选择上课班级' }],
      },
      classTimeSelect: [], //上课时间下拉框
      teacherSelect: [], //上课教师下拉框
      classroomSelect: [], //上课教室下拉框
      teacherFilter: [],
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      showCalendar: true,
      modelParams: null,
      modelVisible: false,
      modelLoading: false,
      conflict: { classroom: [], teacher: [], student: [] },
    }
  },
  created() {
    this.start_time = this.start_date
  },
  methods: {
    moment,
    addConflictTest(e) {
      let params = {}
      if (e.type == 1) {
        params = JSON.parse(JSON.stringify(this.form))
      } else {
        params = JSON.parse(JSON.stringify(this.formDate))
      }

      console.log(params)
      console.log(this.classTimeSelect)
      this.classTimeSelect.forEach((val) => {
        if (val.id == params.class_time) {
          params.class_start_time = val.start_time
          params.class_end_time = val.end_time
        }
      })
      if (params.classroom_id == 0) {
        delete params.classroom_id
      }
      if (params.end_type !== 2) {
        params.end_time = null
      }

      planLessonRoomFilter(params)
        .then((res) => {
          this.conflict = res
        })
        .catch((err) => {
          this.$message.error(err.data.message || '检测失败')
        })
    },
    choiceDay(e) {
      let params = e.replace(/\//g, '-')
      let len = this.formDate.date.length
      let num = 0
      for (let i = this.formDate.date.length; i >= 0; i--) {
        if (this.formDate.date[i] == params) {
          num++
          this.formDate.date.splice(i, 1)
        }
      }
      if (num == 0) {
        this.formDate.date.push(params)
      }
    },
    getSelect() {
      classTimeList({
        school_id: this.$store.state.user.school,
        pageSize: 99999999,
        structures_id: this.structureID,
      }).then((res) => {
        this.classTimeSelect = res.data
      })
      teacherList({ school_id: this.$store.state.user.school, pageSize: 999999999 }).then((res) => {
        this.teacherSelect = res.data
      }),
        classroomList({
          school_id: this.$store.state.user.school,
          pageSize: 999999999,
          structures_id: this.structureID,
        }).then((res) => {
          this.classroomSelect = res.data
        })
    },
    searchClass(val) {
      
       let that = this
      if (this.timer != null) {
        clearTimeout(this.timer)
        this.timer = null
      } else {
        this.timer = setTimeout(function () {
          classList({
            school_id: that.$store.state.user.school, pageSize: 999999, status: 1,
            keywords:val
          }).then((res) => {
            that.timer = null
            that.classList = res.data
          })
        }, 500)
      }
    },
    getClassList(){
      classList({ school_id: this.$store.state.user.school, pageSize: 999999, status: 1 }).then((res) => {
        this.classList = res.data
      })
    },
    showModel() {
      //  this.$refs.formDate.resetFields()
      this.structureID = undefined
      this.visible = true
      this.getClassList()
    },
    showChild(e) {
      if (e == 'classRoom') {
        this.$refs.classRoom.showModal()
      } else if (e == 'classTime') {
        this.$refs.classTime.showModal()
      }
    },
    handleCancel() {
      this.visible = false
    },
    classChange() {},
    getClassFilter(data) {
      console.log(data)
      if(data.course){
        this.coure = data.course.name
      }
      this.classRoom = data.classroom_id
      this.teacher = data.teacher_ids //教师id
      this.structureID = data.structures.id
      this.getSelect()
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          if (params.end_type == 0) {
            params.end_type = null
            params.end_time = null
            params.num = null
          } else if (params.end_type == 1) {
            if (!params.end_time) {
              this.$message.error('请选择结束日期')
              return
            } else {
              params.end_time = moment(params.end_time).format('YYYY-MM-DD')
            }
            params.num = null
          } else if (params.end_type == 2) {
            if (!params.num || params.num == 0) {
              this.$message.error(err.data.message || '请输入结束次数')
            }
            params.end_time = null
          }
          // this.confirmLoading = true
          this.classTimeSelect.forEach((val) => {
            if (val.id == params.class_time) {
              params.class_start_time = val.start_time
              params.class_end_time = val.end_time
            }
          })
          if (params.classroom_id == 0) {
            delete params.classroom_id
          }
          params.start_time = moment(params.start_time).format('YYYY-MM-DD')
          planLessonRoomFilter(params).then((res) => {
            if (res.classroom.length > 0 || res.teacher.length > 0 || res.student.length > 0) {
              let that = this
              let arr = []
              this.conflict = res
              that.confirmLoading = false
              that.showClash(arr, params)
            } else {
              this.formSub(params)
            }
          })
        } else {
          return false
        }
      })
    },

    submitDate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.formDate))
          this.classTimeSelect.forEach((val) => {
            if (val.id == params.class_time) {
              params.class_start_time = val.start_time
              params.class_end_time = val.end_time
            }
          })
          if (params.date.length < 1) {
            this.$message.warning('请选择上课日期')
            return
          }
          this.confirmLoading = true
          if (params.classroom_id == 0) {
            delete params.classroom_id
          }
          if (params.end_type !== 2) {
            params.end_time = null
          }
          this.confirmLoading = true

          planLessonRoomFilter(params).then((res) => {
            if (res.classroom.length > 0 || res.teacher.length > 0 || res.student.length > 0) {
              let arr = []
              let that = this

              // })
              this.conflict = res
              that.confirmLoading = false
              this.showClash(arr, params)
            } else {
              this.formSub(params)
            }
          })
        } else {
          return false
        }
      })
    },
    showClash(arr, data) {
      this.modelParams = data
      this.modelVisible = true
    },
    getTeacherFilter(msg) {
      if (msg == 'form') {
        if (this.form.start_time && this.form.class_time) {
          let params = JSON.parse(JSON.stringify(this.form))
          params.start_time = moment(params.start_time).format('YYYY-MM-DD')
          if (params.end_type == 0) {
            params.end_type = null
            params.end_time = null
            params.num = null
          } else if (params.end_type == 1) {
            if (!params.end_time) {
              this.$message.error('请选择结束日期')
              return
            } else {
              params.end_time = moment(params.end_time).format('YYYY-MM-DD')
            }
            params.num = null
          } else if (params.end_type == 2) {
            if (!params.num || params.num == 0) {
              this.$message.error(err.data.message || '请输入结束次数')
            }
            params.end_time = null
          }
          this.classTimeSelect.forEach((val) => {
            if (val.id == params.class_time) {
              params.class_start_time = val.start_time
              params.class_end_time = val.end_time
            }
          })
          this.form.teacher_ids = []
          planLessonTeacherFilter(Object.assign(params, { pageSize: 999999 })).then((res) => {
            this.teacherFilter = res.data
            this.form.teacher_ids = this.teacher
          })
        }
      } else if (msg == 'editform') {
        let params = JSON.parse(JSON.stringify(this.editForm))
        console.log(params)
        params.start_time = moment(params.start_time).format('YYYY-MM-DD')
        params.date = [params.start_time]
        if (params.end_time) {
          params.end_time = moment(params.end_time).format('YYYY-MM-DD')
        }
        params.week_num = [params.week_num]
        params.school_id = this.$store.state.user.school
        this.classTimeSelect.forEach((val) => {
          if (val.id == params.class_time) {
            params.class_start_time = val.start_time
            params.class_end_time = val.end_time
          }
        })
        planLessonTeacherFilter(Object.assign(params, { pageSize: 999999 })).then((res) => {
          this.teacherFilter = res.data
          // this.editForm.teacher_ids = this.teacher
        })
      } else {
        if (this.formDate.date.length > 0 && this.formDate.class_time) {
          let params = JSON.parse(JSON.stringify(this.formDate))
          this.classTimeSelect.forEach((val) => {
            if (val.id == params.class_time) {
              params.class_start_time = val.start_time
              params.class_end_time = val.end_time
            }
          })
          this.formDate.teacher_ids = []
          planLessonTeacherFilter(Object.assign(params, { pageSize: 999999 })).then((res) => {
            this.teacherFilter = res.data
            // this.formDate.teacher_ids = this.teacher
          })
        }
      }
    },
    formSub(params) {
      this.modelLoading = true
      scheduleCreate(params)
        .then((res) => {
          this.confirmLoading = false
          this.visible = false
          this.$emit('addSuccess')
          this.form = {
            type: 1,
            end_type: 0, //结束方式
            start_time: moment(),
            num: null,
            end_time: moment(),
            // date: null,
            repeat_type: 1,
            week_num: [1],
            class_time: undefined,
            classroom_id: 0,
            class_id: undefined,
            teacher_ids: [],
            content: '',
            school_id: this.$store.state.user.school,
          }
          this.formDate = {
            type: 2,
            date: [],
            class_time: undefined,
            classroom_id: this.classRoom || 0,
            class_id: undefined,
            teacher_ids: [],
            school_id: this.$store.state.user.school,
            content: '',
          }
          this.modelLoading = false
          this.modelVisible = false
          this.$message.success('添加成功')
        })
        .catch((err) => {
          this.modelLoading = false
          this.confirmLoading = false
          this.$message.error(err.data.message || '添加失败')
        })
    },
  },
  watch: {
    'formDate.date': {
      handler(val) {
        this.getTeacherFilter('formDate')
      },
      immediate: false,
      deep: true,
    },
    modelVisible(val) {
      if (val == false) {
        this.modelParams = null
      }
    },
  },
}
</script>

<style lang="less" scoped>
.choiceDay {
  color: #1890ff;
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .title-left {
    font-weight: bold;
  }
  .title-right {
    color: rgb(255, 255, 255);
    font-size: 12px;
    padding: 4px 10px;
    background: rgb(255, 117, 25);
    border-radius: 3px;
  }
}
.datas {
  max-height: 150px;
  background: rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(232, 232, 232);
  border-image: initial;
  border-radius: 4px;
  padding: 16px;
  overflow: auto;
}
</style>
<style lang="less">
.wh_content_all {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0) !important;
  .wh_top_changge {
    position: relative;
    left: -10px;
    li {
      color: #000;
      .wh_jiantou1,
      .wh_jiantou2 {
        border-color: #000;
      }
    }
  }
}
.wh_container {
  margin: 0 !important;
  margin-top: 24px !important;
}
.wh_content {
  padding-right: 0 !important;
}

.wh_chose_day {
  background: rgba(0, 0, 0, 0) !important;
}
.wh_content_item {
  color: #000 !important;
  margin: 2px 0;
}
.wh_item_date:hover {
  color: white;
  border-radius: 50%;
}
.wh_isToday {
  background: darkorange !important;
  color: #fff;
}
.wh_isMark {
  background: #1890ff !important;
  color: white;
}
</style>